<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>

<link rel="stylesheet" type="text/css" href="${ctx}/style/css/adminbase.css" media="screen" />
<title></title>
<script type="text/javascript" src="${ctx}/style/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/style/js/jquery_ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    $('#btn_categoryAdd').click(categoryAdd);
	    
	});
	
	function categoryAdd() {
		var cat_name = $('#in_categoryName').val();
		var actionUrl = '/ws/cat/add';
		alert(cat_name + '을 추가하시겠습니까?');
		
		$.ajax({
            type : 'POST',
            dataType : 'json',
            url : actionUrl,
            data : '{"categoryName":"' + cat_name + '"}',
            contentType: 'application/json',
            async : false,
            success : function(data) {
                if (data != null && data != undefined && data.status == 200) {
                    alert('카테고리를 생성하였습니다.['+data.status+']');
                    
                    $('#tr_nocontent').remove();
                    $('#tr_addform').before(
                    		"<tr id=\"tr_cat_"+ data.data.categoryKeyString +"\">" +
                                "<td>"+cat_name+" <input type=\"button\" value=\"삭제\" onclick=\"categoryRemove('"+data.data.categoryKeyString+"');\"/></td>" +
                            "</tr>");
                    $('#in_categoryName').val('');
                }
                else {
                    alert('카테고리 생성에 실패하였습니다.['+data.message+']');
                }
            },
            error : function(data) {
            	alert('카테고리 생성에 실패하였습니다.');
            }
        });
	}
	
	function categoryRemove(catKeyString) {
		alert(catKeyString);
		var actionUrl = '/ws/cat/remove/' + catKeyString;
		$.ajax({
            type : 'DELETE',
            url : actionUrl,
            async : false,
            success : function(data) {
                if (data != null && data != undefined && data.status == 200) {
                    alert('카테고리를 삭제하였습니다.['+data.status+']');
                    
                    $('#tr_cat_'+catKeyString).remove();
                }
                else {
                	alert('카테고리 삭제에 실패하였습니다.['+data.message+']');
                }
            },
            error : function(data) {
                alert('카테고리 삭제에 실패하였습니다.');
            }
        });
	}
</script>
</head>
<body>

	<div id="communityContents" class="contents">
		<h3>${it.member.userName}님의 명함 카테고리</h3>
		
		<br />
		<div class="table01">

			<table style="width: 400px;">
				<colgroup>
					<col style="width: 400px;" />
				</colgroup>
				<thead>
				</thead>
				<tbody>
				<c:choose>
				<c:when test="${not empty it.member.categories}">
				<c:forEach var="category" items="${it.member.categories}">
				    <tr id="tr_cat_${category.categoryKeyString}">
                        <td>${category.categoryName} <input type="button" value="삭제" onclick="categoryRemove('${category.categoryKeyString}');"/></td>
                    </tr>
				</c:forEach>
				</c:when>
				<c:otherwise>
				    <tr id="tr_nocontent">
                        <td>카테고리가 존재하지 않습니다.</td>
                    </tr>
				</c:otherwise>
				</c:choose>
					<tr id="tr_addform">
	                    <td>
	                        <input type="text" id="in_categoryName" name="categoryName"/>
	                        <input type="button" id="btn_categoryAdd" value="추가"/>
	                    </td>
	                </tr>
				</tbody>
			</table>
			
		</div>
		<br />
		<a href="/ws/main">홈으로</a>
	</div>

</body>
</html>